<!-- 创建时间: 2019年10月15日 星期二 10:51  注册组件  -->
<template>
    <div class="register_container">
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>姓名</label>
                <input
                    type="text"
                    class="mui-input-clear"
                    autofocus="autofocus"
                    placeholder="请输入姓名"
                    v-model="registerInfo.Name"
                />
            </div>
            <div class="mui-input-row">
                <label>身份证号</label>
                <input
                    type="text"
                    v-model="registerInfo.Id"
                    class="mui-input-clear"
                    placeholder="请输入身份证号"
                />
            </div>
            <div class="mui-input-row">
                <label>车牌号</label>
                <span class="btn selectPlateBtn" @click="popupVisible = !popupVisible">
                    {{ selectPlate }}
                    <span class="caret"></span>
                </span>
                <input
                    type="text"
                    v-model="inputPlate"
                    class="mui-input-clear"
                    placeholder="请输入车牌号"
                    style="width: 50%;"
                    maxlength="5"
                />
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input
                    type="password"
                    v-model="registerInfo.Password"
                    class="mui-input-password"
                    placeholder="请输入密码"
                />
            </div>
            <div class="mui-input-row">
                <label>确认密码</label>
                <input
                    type="password"
                    v-model="registerInfo.ConfirmPassword"
                    class="mui-input-password"
                    placeholder="请输入密码"
                />
            </div>
            <div class="mui-input-row">
                <label>手机号</label>
                <input
                    type="tel"
                    v-model="registerInfo.CellPhoneNumber"
                    class="mui-input-clear"
                    placeholder="请输入手机号"
                    ref="phoneNumber"
                />
            </div>
        </div>
        <div class="mui-input-group regCode">
            <label style="display:none">验证码</label>
            <input
                type="password"
                :value="registerInfo.captcha"
                class="mui-input-password"
                style="display:none"
            />
            <mt-field label="验证码" v-model="registerInfo.captcha">
                <button
                    type="button"
                    class="mui-btn mui-btn-outlined"
                    @click="getSMS"
                    ref="getSMS"
                >获取验证码</button>
            </mt-field>
        </div>
        <div class="mui-input-group buttonRegion">
            <div class="mui-button-row">
                <button
                    type="button"
                    class="mui-btn mui-btn-warning mui-btn-block"
                    @click="register"
                    ref="registerBtn"
                >注册</button>
            </div>
        </div>
        <!-- 
            @getPlateValues="getPlateSelectorValue(data, status)" -> 选择的数据, 状态(0表自动触发的值，1表用户选择的值) 
            这个事件表示，子组件向父组件发送消息；子组件向父组件传递子组件中车牌选择器选择的车牌号，触发源点在 onchenge 事件

            :popupVisible="popupVisible" -> popupVisible 控制车牌选择器的显示 初始值为 false
            这个方法表示，父组件向子组件下发数据；父组件中触发显示车牌选择器的数据变量，触发源点在按钮 onclick 事件
            
            @setPopupVisible="setPopupVisible" -> setPopupVisible 子组件发送的消息，要求关闭车牌选择器
            这个事件表示，子组件向父组件发送消息；子组件中触发了隐藏车牌选择器的事件，将把父组件控制显示的数据变量进行更新

            在使用该车牌选择器组件的时候 我们只需要将“”引号内的方法或事件进行定义就好了
        -->
        <ps
            @getPlateValues="getPlateSelectorValue"
            :popupVisible="popupVisible"
            @setPopupVisible="setPopupVisible"
        ></ps>
    </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mui from "../../lib/MUI/dist/js/mui.js";
import { Field, Toast } from "mint-ui";
import ps from "../subComponents/PlateSelector.vue";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: { ps },
    beforeRouteEnter(to, from, next) {
        if (sessionStorage.getItem("cubelibrarytoken") != null) {
            next({
                path: "/"
            });
        } else {
            next();
        }
    },
    data() {
        //这里存放数据
        return {
            // registerInfo: {
            //     // 姓名
            //     Name: "张健强",
            //     // 身份证号
            //     Id: "511521199807076171",
            //     // 车牌号
            //     PlateNumber: "88888",
            //     // 密码
            //     Password: "1314520tfy",
            //     // 确认密码
            //     ConfirmPassword: "1314520tfy",
            //     // 手机号
            //     CellPhoneNumber: "17345252917",
            //     // 验证码
            //     captcha: ""
            // },
            registerInfo: {
                // 姓名
                Name: "",
                // 身份证号
                Id: "",
                // 车牌号
                PlateNumber: "",
                // 密码
                Password: "",
                // 确认密码
                ConfirmPassword: "",
                // 手机号
                CellPhoneNumber: "",
                // 验证码
                captcha: ""
            },
            // 获取短信控制定时器
            getSMS_Dt: "",
            // 选择器中选择的车牌
            selectPlates: [],
            // 将选择器数组中的车牌进行拼接
            selectPlate: "",
            // 用户输入的车牌后5位数
            inputPlate: "",
            // 控制显示或隐藏车牌选择器组件
            popupVisible: false
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        selectPlate: function(newval) {
            this.registerInfo.PlateNumber = newval + this.inputPlate;
        },
        inputPlate: function(newval) {
            this.registerInfo.PlateNumber = this.selectPlate + newval;
        }
    },
    //方法集合
    methods: {
        // 会员获取短信验证码
        getSMS() {
            if (this.registerInfo.CellPhoneNumber == null) {
                mui.alert("请输入手机号");
                this.$refs.phoneNumber.focus();
                return;
            }
            this.$refs.getSMS.setAttribute("disabled", "disabled");
            var second = 120;
            this.getSMS_Dt = setInterval(() => {
                second--;
                this.$refs.getSMS.innerText = "获取验证码(" + second + ")";
                if (second <= 0) {
                    clearInterval(this.getSMS_Dt);
                    this.$refs.getSMS.innerText = "获取验证码";
                    this.$refs.getSMS.removeAttribute("disabled");
                }
            }, 1000);

            this.$http
                .post("getSMS", {
                    phoneNumber: this.registerInfo.CellPhoneNumber
                })
                .then(response => {
                    mui.alert(response.bodyText);
                    this.$refs.getSMS.innerText = "获取验证码";
                    this.$refs.getSMS.removeAttribute("disabled");
                });
        },
        // 会员用户注册
        register() {
            var check = true;
            mui(".register_container input").each(function() {
                //若当前input为空，则alert提醒
                if (!this.value || this.value.trim() == "") {
                    var label = this.previousElementSibling;
                    mui.alert(label.innerText + "不允许为空");
                    check = false;
                    return false;
                }
            }); //校验通过，继续执行业务逻辑
            if (check) {
                this.$refs.registerBtn.setAttribute("disabled", "disabled");
                this.$refs.registerBtn.innerText = "注册中...";
                this.$http
                    .post("register", {
                        registerInfo: JSON.stringify(this.registerInfo)
                    })
                    .then(response => {
                        if (response.ok && response.bodyText == "1") {
                            Toast({
                                message: "注册成功!",
                                position: "middle",
                                duration: 2000
                            });
                            var dt = setTimeout(() => {
                                clearInterval(this.getSMS_Dt);
                                this.$router.push({
                                    path: "/LoginPage/Login"
                                });
                                clearInterval(dt);
                            }, 2000);
                        } else {
                            mui.alert(response.bodyText);
                            this.$refs.registerBtn.innerText = "注册";
                            this.$refs.registerBtn.removeAttribute("disabled");
                        }
                    });
            }
        },
        // 初始化按钮中显示的值 - 默认选择器中第一个值 - 会随用户选择而改变
        getPlateSelectorValue(data, status) {
            this.selectPlates = data;
            if (status == 1) {
                this.selectPlate = this.selectPlates.join(",").replace(",", "");
            }
        },
        setPopupVisible(data) {
            this.popupVisible = data;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.selectPlate = this.selectPlates.join(",").replace(",", "");
    }
};
mui(".mui-input-row input").input();
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.register_container {
    .regCode {
        margin-top: 12px;
        button {
            font-size: 15px;
        }
    }
    .buttonRegion:before,
    .buttonRegion:after,
    .buttonRegion {
        margin-top: 10px;
        background-color: #fff;
    }
    .selectPlateBtn {
        line-height: 40px;
        padding: 0px;
        width: 15%;
        text-align: left;
        font-size: 16px;
        font-weight: bold;
    }
    .selectPlateBtn:hover {
        background-color: #fff;
        border: 0px;
    }
}
.mint-cell-wrapper {
    background-origin: inherit !important;
}
.mui-btn-block {
    margin-bottom: 0px;
    padding: 6px 0px;
}
.mui-input-group .mui-input-row:after {
    left: 0;
}
a:hover,
a:focus {
    color: #333333;
    font-weight: bold;
    text-decoration: none;
}
</style>